<template>
  <view class="gongwei">
    <bazi-section title="旺衰参考">
      <view class="liuqin-containter">
        <view class="liuqin-table">
          <view class="th">
            <view class="th-item">年柱</view>
            <view class="th-item">月柱</view>
            <view class="th-item">日柱</view>
            <view class="th-item">时柱</view>
          </view>
          <view class="tr">
            <view class="tr-item">
              <view class="jx-sizhu" :style="fiveElementInfo(tiangan[0])">{{ tiangan[0] }}</view>
              <view class="jx-type">年干</view>
            </view>
            <view class="tr-item">
              <view class="jx-sizhu" :style="fiveElementInfo(tiangan[1])">{{ tiangan[1] }}</view>
              <view class="jx-type">月干</view>
            </view>
            <view class="tr-item">
              <view class="jx-sizhu jx-self" :style="fiveElementInfo(tiangan[2])">{{ tiangan[2] }}</view>
              <view class="jx-type">日干（日元）</view>
            </view>
            <view class="tr-item">
              <view class="jx-sizhu" :style="fiveElementInfo(tiangan[3])">{{ tiangan[3] }}</view>
              <view class="jx-type">时干</view>
            </view>
          </view>
          <view class="tr">
            <view class="tr-item tr-dizhi">
              <view class="jx-sizhu" :style="fiveElementInfo(dizhi[0])">{{ dizhi[0] }}</view>
              <view class="jx-type">年支</view>
            </view>
            <view class="tr-item">
              <view class="jx-sizhu" :style="fiveElementInfo(dizhi[1])">{{ dizhi[1] }}</view>
              <view class="jx-type">月支</view>
            </view>
            <view class="tr-item">
              <view class="jx-sizhu" :style="fiveElementInfo(dizhi[2])">{{ dizhi[2] }}</view>
              <view class="jx-type">日支</view>
            </view>
            <view class="tr-item tr-dizhi">
              <view class="jx-sizhu" :style="fiveElementInfo(dizhi[3])">{{ dizhi[3] }}</view>
              <view class="jx-type">时支</view>
            </view>
          </view>
        </view>
        <view class="info">
          <view class="score-box">
            <view class="title">八字得分</view>
            <view class="score">{{ baziResult.strongWeakScore }}分</view>
            <view class="title">结论</view>
            <view class="score">{{ baziResult.strongWeakScore > 50 ? "八字身强" : "八字身弱"}}</view>
          </view>
          <view class="tips">*打分仅供参考</view>
        </view>
        <view class="progress-info">
          <view class="unit">
            <view class="top-unit">衰</view>
            <my-progress :percentage="baziResult.strongWeakScore" height="24"></my-progress>
            <view class="top-unit">旺</view>
          </view>
          <view class="unit">
            <template v-for="(item,index) in unit">
              <view class="unit-item" :key="index">
                <view>{{item.value}}</view>
                <view>{{item.text}}</view>
              </view>
            </template>
          </view>
        </view>
      </view>
    </bazi-section>
  </view>
</template>
<script>
  import baziSection from './section.vue'
  import wuxingColor from '@/utils/wuxing.js'
  export default {
    components: {
      baziSection
    },
    props: {
      result: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        baziResult: this.result,
        tiangan: [],
        dizhi: [],
        shizhu: ["时间", "年柱", "月柱", "日柱", "时柱"],
        unit: [{
            value: 0,
            text: "极弱"
          },
          {
            value: 25,
            text: "弱"
          },
          {
            value: 45,
            text: "偏弱"
          },
          {
            value: 55,
            text: "偏弱"
          },
          {
            value: 75,
            text: "强"
          },
          {
            value: 100,
            text: "极强"
          },
        ]
      }
    },
    mounted() {
      this.tiangan = [this.baziResult.yearGan, this.baziResult.monthGan, this.baziResult.dayGan, this.baziResult
        .timeGan];
      this.dizhi = [this.baziResult.yearZhi, this.baziResult.monthZhi, this.baziResult.dayZhi, this.baziResult.timeZhi];
    },
    methods: {
      // 对应五行信息
      fiveElementInfo(str) {
        let {
          color
        } = wuxingColor.getGanzhiWuxingColorInfo(str);
        return `color: ${color}`
      }
    }
  };
</script>

<style lang="scss" scoped>
  .gongwei {
    width: 100%;
    box-sizing: border-box;
  }

  .section {
    width: 100%;
    height: 72rpx;
    color: white;
    background: #C5A680;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10rpx 46rpx;

    .section-title {
      padding-right: 22rpx;
    }
  }

  .liuqin-containter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32rpx 0;
  }

  .liuqin-table {
    width: 650rpx;
    margin: auto;

    .th {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;

      .th-item {
        width: 25%;
        white-space: nowrap;
        text-align: center;
        color: #2C2C2C;
        background-color: #E2DBD4;
        border: 2rpx solid #525252;
        margin: 0 -2rpx -2rpx 0;
        padding: 4rpx 0;
      }

      .th-item:first-child {
        border-radius: 4rpx 0 0 0;
        border: 2rpx solid #4B240D;
      }

      .th-item:last-child {
        border-radius: 0 4rpx 0 0;
        border: 2rpx solid #4B240D;
      }
    }

    .tr {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;

      .tr-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 2rpx solid #4B240D;
        margin: 0 -2rpx -2rpx 0;
        padding: 10rpx 0;
      }

      .tr-dizhi:first-child {
        border-radius: 0 0 0 10rpx;
        border: 2rpx solid #4B240D;
      }

      .tr-dizhi:last-child {
        border-radius: 0 0 10rpx 0;
        border: 2rpx solid #4B240D;
      }
    }
  }

  .jx-sizhu {
    color: #FFFFFF;
    
    font-size: 40rpx;
    padding: 6rpx;
  }

  .jx-self {
    color: #2C2C2C;
  }

  .jx-type {
    color: #787878;
    font-size: 24rpx;
    text-align: center;
  }

  .info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 48rpx;
    margin-top: 24rpx;
    background: rgba(216, 216, 216, 0.1);

    .score-box {
      display: flex;
      flex-direction: row;
      align-items: center;

      .title {
        color: #fff;
        border-radius: 20rpx;
        background-color: #4B240D;
        padding: 4rpx 12rpx;
        width: fit-content;
        white-space: nowrap;
      }

      .score {
        white-space: nowrap;
        margin: 0 30rpx 0 10rpx;
      }
    }

    .tips {
      font-size: 20rpx;
      color: #787878;
    }
  }

  .progress-info {
    display: flex;
    flex-direction: column;
    padding: 55rpx 48rpx 0;

    .unit {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin: 10rpx 0;

      .unit-item {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }

    .top-unit {
      font-size: 36rpx;
      padding: 0 6rpx;
    }
  }
</style>